<template>
  <div class="markform">
    <el-form
      label-position="left"
      label-width="80px"
      :model="formLabelAlign"
      :rules="rules"
      ref="formLabelAlign"
    >
      <div style="display: flex; padding-top: 22px">
        <el-form-item label="名称" prop="risAssName">
          <el-input
            style="width: 180px"
            v-model="formLabelAlign.risAssName"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="评估来源"
          style="width: 76%"
          prop="risAssSources"
        >
          <el-input v-model="formLabelAlign.risAssSources"></el-input>
        </el-form-item>
      </div>
    </el-form>
    <fm-making-form ref="makingform" style="height: 100%" preview clearable>
      <template slot="action">
        <!-- 自定义操作区域插槽 -->
        <el-button type="text" icon="el-icon-back" @click="goBack"
          >返回</el-button
        >
        <el-button
          type="text"
          icon="el-icon-upload"
          @click="saveJsonData"
          >保存</el-button
        >
      </template>
    </fm-making-form>
  </div>
</template>
<!-- 引入组件库 -->
<!--<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/form-making/dist/FormMaking.umd.js"></script>-->
<!-- 需要在设计器中预览代码需要引入ace.js库 -->

<script>
import { saveFollowYzyQuestionnaire } from "@/api/back-management/follow-up-questionnaire";
import { newtheriskassessment } from "@/api/back-management/Associated_configuration"; //新增风险评估
import { theechotheriskassessment } from "@/api/back-management/Associated_configuration"; //风险评估回显
import { updatetheriskassessment } from "@/api/back-management/Associated_configuration"; //风险评估修改

/*    import FormMaking from 'form-making'*/
// import 'form-making/dist/.css'
export default {
  name: "Association_configuration_form",
  /* components: {
            FormMaking
        },*/
  data() {
    return {
      formLabelAlign: {
        risAssName: "",
        risAssSources: "",
      },
      jsonData: {},
      /* formConfig: {}, //新建表单 */
      formId: "", //修改时利用的ID回显以及保存
      questionnaireId: "",
      have_formId: false, //保存时判断当前是修改还是新增
      /*  category_form_Id: "",
      pageNum_formCategory: 0,
      pageSize_formCategory: 0, */
      rules: {
        risAssName: [
          { required: true, message: "请输入名称", trigger: "blur" },
        ],
        risAssSources: [
          { required: true, message: "请输入评估来源", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.questionnaireId = this.$route.query.questionnaireId;
  },
  methods: {
    //获取表单设计器json
    saveJsonData() {
       sessionStorage.setItem("fourth", "fourth");
      this.jsonData = this.$refs.makingform.getJSON();
      let params = {
        ...this.formLabelAlign,
        risAssContent: JSON.stringify(this.jsonData),
        risAssState:"1"
      };
      /* 保存表单 */
      this.$refs.formLabelAlign.validate((valid) => {
        if (valid) {
          newtheriskassessment(params)
            .then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: res.message,
                  type: "success",
                });
                this.$router.push({
                  path: "follow_up_set",
                  query: {
                    activeName: "fourth", //查询表单名
                  },
                });
              } else {
                this.$message({
                  message: res.message,
                  type: "error",
                });
              }
            })
            .catch((error) => {
              console.log(error);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    goBack() {
      sessionStorage.setItem("fourth", "fourth");
      this.$router.push({
        path: "follow_up_set",
        query: {
          activeName: "fourth", //查询表单名
        },
      });
    },
  },
};
</script>

<style scoped>
/* @import "~form-making/dist/FormMaking.css"; */
.markform {
  height: 100vh;
  position: relative;
}
.markform /deep/ .components-list .form-edit-widget-label > a {
  color: #333;
}
.markform /deep/ .components-list .form-edit-widget-label > a .icon {
  display: inline;
}
.markform /deep/ .el-aside {
  width: 300px !important;
}
.markform /deep/ .el-header {
  display: flex;
  justify-content: flex-end;
}
.markform /deep/ .widget-config-container {
  width: 350px !important;
}
/* .markform /deep/ .el-form--label-top .el-form-item--medium:first-child {
  display: none;
} */
.markform /deep/ .identification {
  display: none !important;
}
.markform /deep/ .titleColor {
  display: none !important;
}
.markform /deep/ .customClass {
  display: none !important;
}
.markform /deep/ .others {
  display: none !important;
}
.markform /deep/ .additionalEdu {
  display: none !important;
}
.markform /deep/ .addOthers {
  display: none !important;
}
.back {
  display: flex;
  align-items: center;
  font-size: 14px;
  position: absolute;
  padding: 7px 15px;
  border-radius: 4px;
  color: #49515c;
  background: #fff;
  border: 1px solid #e1e3e6;
  right: 20px;
  cursor: pointer;
  top: 23px;
}
</style>
<style>
.getData,
.getCustomData,
.reset {
  display: none !important;
}
</style>
